<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐 - 首页</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", sans-serif;
    }
    
    a {
      text-decoration: none;
      color: #333;
    }
    
    a:hover {
      color: #31c27c;
    }
    
    body {
      background-color: #f5f5f5;
      color: #333;
    }
    
    header {
      background-color: #fff;
      border-bottom: 1px solid #eee;
    }
    
    .header-inner {
      width: 1200px;
      height: 80px;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }
    
    .qqmusic-logo {
      display: flex;
      align-items: center;
    }
    
    .qqmusic-logo img {
      width: 36px;
      height: 36px;
      margin-right: 8px;
    }
    
    .qqmusic-logo span {
      font-size: 22px;
      font-weight: bold;
      color: #333;
    }
    
    main {
      width: 1200px;
      margin: 0 auto;
      padding: 30px 0;
    }
    

    .section-title {
      font-size: 22px;
      color: #333;
      margin-bottom: 20px;
      padding: 0 10px;
      text-align: center;
      width: 100%;
    }
    
    .tag-list {
      display: flex;
      margin-bottom: 25px;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .tag-item {
      padding: 5px 15px;
      margin-right: 15px;
      margin-bottom: 10px;
      color: #666;
      font-size: 14px;
      border-radius: 20px;
      transition: all 0.3s;
    }
    
    .tag-item:hover {
      background-color: #f2f2f2;
      color: #31c27c;
    }
    
    .tag-active {
      background-color: #31c27c;
      color: #fff;
    }
    
    .tag-active:hover {
      background-color: #31c27c;
      color: #fff;
    }
    
    .playlist {
      display: flex;
      justify-content: space-between;
      margin-bottom: 50px;
    }
    
    .playlist-item {
      width: 220px;
    }
    
    .cover-wrap {
      position: relative;
      display: block;
      width: 220px;
      height: 220px;
      margin-bottom: 15px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    
    .cover-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .cover-play {
      position: absolute;
      right: 15px;
      bottom: 15px;
      width: 40px;
      height: 40px;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s ease;
    }
    
    .cover-wrap:hover .cover-img {
      transform: scale(1.05);
    }
    
    .cover-wrap:hover .cover-mask {
      opacity: 1;
    }
    
    .cover-wrap:hover .cover-play {
      opacity: 1;
      transform: translateY(0);
    }
    
    .playlist-title {
      font-size: 14px;
      font-weight: normal;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .playlist-listener {
      font-size: 12px;
      color: #999;
    }
    
    /* 新歌首发样式 */
    .new-songs {
      margin-bottom: 50px;
    }
    
    .songlist {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .song-item {
      width: 380px;
      height: 100px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      transition: box-shadow 0.3s;
    }
    
    .song-item:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .song-cover {
      width: 70px;
      height: 70px;
      border-radius: 5px;
      overflow: hidden;
      margin-right: 15px;
      position: relative;
    }
    
    .song-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .song-info {
      flex: 1;
      min-width: 0;
    }
    
    .song-name {
      font-size: 16px;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .song-subtitle {
      font-size: 12px;
      color: #999;
      margin-bottom: 5px;
    }
    
    .song-singer {
      font-size: 13px;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .song-time {
      font-size: 13px;
      color: #999;
      margin-left: 15px;
      white-space: nowrap;
    }
    
    /* MV区域样式 */
    .mv-section {
      margin-bottom: 50px;
    }
    
    .mvlist {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .mv-item {
      width: 220px;
      margin-bottom: 30px;
    }
    
    .mv-cover {
      position: relative;
      width: 220px;
      height: 124px;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    
    .mv-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .mv-duration {
      position: absolute;
      right: 5px;
      bottom: 5px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      font-size: 12px;
      padding: 2px 5px;
      border-radius: 4px;
    }
    
    .mv-title {
      font-size: 14px;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .mv-singer {
      font-size: 12px;
      color: #999;
      margin-bottom: 5px;
    }
    
    .mv-playcount {
      font-size: 12px;
      color: #999;
    }
    
    /* 工具类 */
    .nowrap {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* 响应式调整 */
    @media (max-width: 1200px) {
      .header-inner, main {
        width: 95%;
      }
      
      .playlist {
        flex-wrap: wrap;
      }
      
      .playlist-item {
        width: 30%;
        margin-bottom: 30px;
      }
      
      .cover-wrap {
        width: 100%;
        padding-top: 100%;
        height: 0;
        position: relative;
      }
      
      .cover-img {
        position: absolute;
        top: 0;
        left: 0;
      }
      
      .mv-item {
        width: 30%;
      }
      
      .mv-cover {
        width: 100%;
      }
    }
    
    @media (max-width: 768px) {
      .playlist-item, .mv-item {
        width: 48%;
      }
      
      .song-item {
        width: 100%;
      }
    }
    
    @media (max-width: 480px) {
      .playlist-item, .mv-item {
        width: 100%;
      }
      
      .tag-item {
        margin-right: 10px;
        padding: 3px 10px;
        font-size: 12px;
      }
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
</head>
<body>
  <header>
    <div class="header-inner">
      <div class="qqmusic-logo">
        <img src="https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/01b10f3e7deb4dca8bba8d4e76859082.jpg~tplv-a9rns2rl98-24:720:720.image?rcl=20251015180319C3E20EDD47AAF031DD1B&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1761127399&x-signature=QLSnlPBN4n8qyzG7VOiyQ8%2BUChQ%3D" alt="QQ音乐图标">
        <span>QQ音乐</span>
      </div>
    </div>
  </header>
  
  <main>
    <section class="playlist-section">
      <h2 class="section-title">歌单推荐</h2>
      <div class="tag-list">
        <a href="#" class="tag-item tag-active">为你推荐</a>
        <a href="#" class="tag-item">运动</a>
        <a href="#" class="tag-item">网络歌曲</a>
        <a href="#" class="tag-item">思念</a>
        <a href="#" class="tag-item">官方精选</a>
        <a href="#" class="tag-item">情歌</a>
      </div>
      <div class="playlist" id="playlist-container">
      </div>
    </section>
    

    <section class="new-songs">
      <h2 class="section-title">新歌首发</h2>
      <div class="tag-list">
        <a href="#" class="tag-item tag-active">最新</a>
        <a href="#" class="tag-item">内地</a>
        <a href="#" class="tag-item">港台</a>
        <a href="#" class="tag-item">欧美</a>
        <a href="#" class="tag-item">韩国</a>
        <a href="#" class="tag-item">日本</a>
      </div>
      <div class="songlist" id="songlist-container">
      </div>
    </section>
    

    <section class="mv-section">
      <h2 class="section-title">MV</h2>
      <div class="tag-list">
        <a href="#" class="tag-item tag-active">精选</a>
        <a href="#" class="tag-item">内地</a>
        <a href="#" class="tag-item">韩国</a>
        <a href="#" class="tag-item">港台</a>
        <a href="#" class="tag-item">欧美</a>
        <a href="#" class="tag-item">日本</a>
      </div>
      <div class="mvlist" id="mvlist-container">
      </div>
    </section>
  </main>
  
  <footer></footer>

  <script>
    function formatPlayCount(count) {
      if (count >= 100000000) {
        return (count / 100000000).toFixed(1) + '亿';
      } else if (count >= 10000) {
        return (count / 10000).toFixed(1) + '万';
      }
      return count.toString();
    }
    
    function formatDuration(seconds) {
      const min = Math.floor(seconds / 60);
      const sec = seconds % 60;
      return `${min}:${sec < 10 ? '0' + sec : sec}`;
    }
    
    function renderPlaylists(playlists) {
      const container = document.getElementById('playlist-container');
      container.innerHTML = '';
      
      playlists.forEach(playlist => {
        const playlistItem = document.createElement('div');
        playlistItem.className = 'playlist-item';
        
        playlistItem.innerHTML = `
          <a href="#" class="cover-wrap">
            <img src="${playlist.cover}" class="cover-img" alt="${playlist.title}">
            <div class="cover-mask"></div>
            <i class="fa fa-play-circle-o cover-play" style="color:#fff; font-size:40px;"></i>
          </a>
          <h3 class="playlist-title nowrap">${playlist.title}</h3>
          <div class="playlist-listener">播放量: ${formatPlayCount(playlist.listen_num)}</div>
        `;
        
        container.appendChild(playlistItem);
      });
    }
    
    function renderSongs(songs) {
      const container = document.getElementById('songlist-container');
      container.innerHTML = '';
      
      songs.forEach(song => {
        const songItem = document.createElement('div');
        songItem.className = 'song-item';
        
        const singers = song.singer.join(', ');
        
        songItem.innerHTML = `
          <div class="song-cover">
            <img src="${song.cover}" alt="${song.name}">
          </div>
          <div class="song-info">
            <div class="song-name nowrap">${song.name}</div>
            ${song.subtitle ? `<div class="song-subtitle">${song.subtitle}</div>` : ''}
            <div class="song-singer nowrap">${singers}</div>
          </div>
          <div class="song-time">${formatDuration(song.interval)}</div>
        `;
        
        container.appendChild(songItem);
      });
    }
    
    function renderMVs(mvs) {
      const container = document.getElementById('mvlist-container');
      container.innerHTML = '';
      
      mvs.forEach(mv => {
        const mvItem = document.createElement('div');
        mvItem.className = 'mv-item';
        
        mvItem.innerHTML = `
          <div class="mv-cover">
            <img src="${mv.cover}" alt="${mv.title}">
            <div class="mv-duration">04:30</div>
          </div>
          <div class="mv-title nowrap">${mv.title}</div>
          <div class="mv-singer">${mv.singer}</div>
          <div class="mv-playcount">${formatPlayCount(mv.listen_num)} 次观看</div>
        `;
        
        container.appendChild(mvItem);
      });
    }
    
    function setupTagSwitching() {
      const tagItems = document.querySelectorAll('.tag-item');
      tagItems.forEach(tag => {
        tag.addEventListener('click', function(e) {
          e.preventDefault();

          const parentTagList = this.parentElement;
          parentTagList.querySelectorAll('.tag-item').forEach(item => {
            item.classList.remove('tag-active');
          });

          this.classList.add('tag-active');
        });
      });
    }
    
    async function loadDataAndRender() {
      try {
        const response = await fetch('task.json');
        const data = await response.json();
        
        renderPlaylists(data.playlist);
        renderSongs(data.songlist);
        renderMVs(data.mvlist);
        setupTagSwitching();
      } catch (error) {
        console.error('加载数据失败:', error);
      }
    }

    window.addEventListener('DOMContentLoaded', loadDataAndRender);
  </script>
</body>
</html>
